<template>
    <div class="input_t_box">
        <el-input
            :placeholder="placeholder"
            :value='valueInput'
            :disabled="inputDisabled"
            @input='handleInput'
        ></el-input>
        <span class="span" @click="handleClick">{{ spanInnerHtml }}</span>
    </div>
</template>

<script>
export default {
    props: ['placeholder', 'value', 'size'],
    data() {
        return {
            valueInput: this.value,
            inputDisabled: false,
            spanInnerHtml: !this.value ? "修改" : "保存"
        }
    },
    computed: {
        editVisible() {
            return !this.value
        },
    },
    // watch: {
    //     "spanInnerHtml"(val, oldVal){
    //         console.log(val, oldVal, 'val')
    //     }
    // },
    methods: {
        handleInput($event) {
            this.valueInput = $event;
            this.$emit("input", $event)
        },
        handleClick() {
            this.inputDisabled = !this.inputDisabled;
            this.spanInnerHtml = !this.inputDisabled ? "保存" : "修改"
        }
    }
}
</script>

<style lang="less" scoped>
.input_t_box {
    display: flex;
    .span {
        display: inline-block;
        width: 40px;
        color: #409EFF;
        cursor: pointer;
        margin-left: 10px;
    }
}
</style>